<template>
  <div>
    <sui-container style="padding: 50px">
      <h2 is="sui-header">
        Message
        <a href="http://localhost:8080/" is="sui-button" style="float: right ">主页</a>
      </h2>
      <sui-divider/>
      <sui-message>
        <sui-message-header>
          课程发布
        </sui-message-header>
        <p>我们刚刚发布了Semantic UI 的课程</p>
      </sui-message>
      <!--compact 让信息变得紧凑-->
      <sui-message compact>
        <sui-message-header>
          课程发布
        </sui-message-header>
        <p>我们刚刚发布了Semantic UI 的课程</p>
      </sui-message>
      <sui-message size="huge" compact>
        <sui-message-header>
          课程发布
        </sui-message-header>
        <p>我们刚刚发布了Semantic UI 的课程</p>
      </sui-message>
      <!--有bug-->
      <sui-message icon>
        <sui-icon name="info"/>
        <sui-message-content>
          <sui-message-header>课程发布</sui-message-header>
          <p>我们刚刚发布了 Semantic UI 的课程</p>
        </sui-message-content>
      </sui-message>
      <!--有bug-->
      <sui-message
        icon='info'
        header="课程发布"
        content="我们刚刚发布了 Semantic UI 的课程"
      />
      <sui-message warning compact>
        <sui-header>Test</sui-header>
        <p>用来测试样式</p>
      </sui-message>
      <sui-message info compact>
        <sui-header>Test</sui-header>
        <p>用来测试样式</p>
      </sui-message>
      <sui-message positive compact>
        <sui-header>Test</sui-header>
        <p>用来测试样式</p>
      </sui-message>
      <sui-message negative compact>
        <sui-header>Test</sui-header>
        <p>用来测试样式</p>
      </sui-message>
      <sui-message color="purple" compact>
        <sui-header>Test</sui-header>
        <p>用来测试样式</p>
      </sui-message>
      <sui-message color="pink" compact>
        <sui-header>Test</sui-header>
        <p>用来测试样式</p>
      </sui-message>
      <sui-message color="brown" compact>
        <sui-header>Test</sui-header>
        <p>用来测试样式</p>
      </sui-message>
      <sui-message color="black" compact>
        <sui-header>Test</sui-header>
        <p>用来测试样式</p>
      </sui-message>
      <!--fade的效果不显示-->
      <transition name="fade">
        <sui-message v-if="visible" header="Test" content="用来测试样式" dismissable compact @click="handleDismiss"/>
      </transition>
    </sui-container>
  </div>
</template>

<script>
export default {
  name: 'Message',
  data () {
    return {
      visible: true
    }
  },
  methods: {
    handleDismiss () {
      this.visible = false
      setTimeout(() => {
        this.visible = true
      }, 2000)
    }
  }
}
</script>

<style scoped>

</style>
